<template>
    <div class="back_page" v-if="show">
        <div class="header">
            <el-page-header @back="goBack">
                <template #content>
                    <span class="text-large bold mr-3"> {{title}} </span>
                </template>
<!--                <template #extra>-->
<!--                    <div class="flex items-center">-->
<!--                        <el-button>返回</el-button>-->
<!--                        <el-button type="primary" class="ml-2">Edit</el-button>-->
<!--                    </div>-->
<!--                </template>-->
            </el-page-header>
            <el-divider />
        </div>
        <div class="content">
            <el-scrollbar>
                <slot></slot>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router"
import {defineEmits, defineProps} from "vue";

const router = useRouter()
const route = useRoute()

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    show:{
        type:Boolean,
        default: false,
    },
})
const emits = defineEmits(['update:show'])


const goBack = () => {
    emits("update:show", false)
}

</script>

<style scoped>
.back_page{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 20px;
    z-index: 999;
    background-color: #fff;
    padding: 15px;
}
.header{
    height: 70px;
}
.content{
    height: calc(100% - 70px);
}
</style>
